import { useDispatch, useSelector } from "react-redux"
import { RootState } from "../store"
import { changeActive } from "../store/actions/channel"

export default function Channel() {
  const channel = useSelector((state: RootState) => state.channel)
  const dispatch = useDispatch()
  const channelClick = (id: number) => {
    dispatch(changeActive(id))
  }

  return (
    <ul className="catagtory">
      {
        channel.channelList.map(item => {
          return (
            <li onClick={() => { channelClick(item.id) }} key={item.id} className={item.id === channel.active ? 'select' : ''}>{item.name} </li>
          )
        })
      }
    </ul>
  )
}